<!DOCTYPE html>
<html>
<head>
<style>
div {
    height: 150px;
    width: 150px;
}

div>div {
    background-color: blue;
}

.container {
    border: 1px solid black;
    margin: 20px;
}

.transformed1_ref {
    transform: matrix(1, 0, 0.255342, 1, 0, 0);
}

.transformed2_ref {
    transform: matrix(1, 0.546302, 0, 1, 0, 0);
}

.transformed3_ref {
    transform: matrix(1, 0.546302, 0.255342, 1, 0, 0);
}

</style>
</head>
<body>
<p>
<div class="container">
    <div class="transformed1_ref"></div>
</div>
</p>

<p>
<div class="container">
    <div class="transformed2_ref"></div>
</div>
</p>

<p>
<div class="container">
    <div class="transformed3_ref"></div>
</div>
</p>
</body>
</html>
